<template>
  <Header />
  <ZHeader />
  <div class="shopping">
    <div class="content">
      <!-- 购物车表格头部 -->
      <div class="title">
        <div class="checks">
          <input
            type="checkbox"
            class="checkbox"
            :checked="all"
            @change="allCheck"
          />&nbsp&nbsp全选
        </div>
        <div class="goodsImgs"></div>
        <div class="goodsNames">商品名称</div>
        <div class="prices">单价</div>
        <div class="inputNumbers">数量</div>
        <div class="totals">小计</div>
        <div class="handles">操作</div>
      </div>
      <!-- 购物车商品信息 -->
      <div
        class="details"
        v-for="goods in shoppingCartStore.shoppingCartData"
        :key="goods.id"
      >
        <div class="check">
          <input
            type="checkbox"
            class="checkbox"
            :checked="goods.check"
            @change="handle(goods.id)"
          />
        </div>
        <div class="goodsImg">
          <img :src="'http://101.132.181.9:3000/' + goods.productImg" alt="" />
        </div>
        <div class="goodsName">{{ goods.productName }}</div>
        <div class="price">{{ goods.price }}</div>
        <div class="inputNumber">
          <InputNumber :productID="goods.productID" :num="goods.num" />
        </div>
        <div class="total">{{ goods.num * goods.price }}<span>元</span></div>
        <div class="handle" @click="delGoods(goods.productID)">x</div>
      </div>
    </div>
  </div>
  <!-- 优惠结算底部 -->
  <div class="footing">
    <div class="footing-content">
      <div class="left">
        <div class="one"><router-link to="/goods">继续购物</router-link></div>
        <div class="two">
          已选择{{
            shoppingCartStore.shoppingCartData.filter((item) => item.check)
              .length
          }}件
        </div>
      </div>
      <div class="right">
        <div class="totalMoney">合计：{{ shoppingCartStore.allMoney }}元</div>
        <router-link to="settlement" class="goSettlement">去结算</router-link>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script lang="ts">
export default {
  name: "shopping",
};
</script>

<script lang="ts" setup>
import ZHeader from "../components/zhq/header.vue";
import InputNumber from "../components/zhq/inputNumber.vue";
import { delShoppingCartApi } from "../api/shopping";
import { ref } from "vue";
import { useShoppingCartStore } from "../store/shoppingCart";
import { useAppStore } from "../store/user";
import Header from "../components/header.vue";
import Footer from "../components/footer.vue";
const appStore = useAppStore();
// 定义购物车管理数据
let shoppingCartStore = useShoppingCartStore();
// 定义是否全选标识
const all = ref(false);
// 单击商品复选框
const handle = (id: number) => {
  // 判断单个复选框
  shoppingCartStore.shoppingCartData.map((item) => {
    if (item.id === id) {
      item.check = !item.check;
    }
    const allIsDone = shoppingCartStore.shoppingCartData.every(
      (item) => item.check
    );
    console.log(allIsDone);
    all.value = allIsDone;

    return;
  });

  // console.log(id);
};
// 全选按钮触发的函数
const allCheck = () => {
  all.value = !all.value;
  shoppingCartStore.shoppingCartData.forEach(
    (item) => (item.check = all.value)
  );
};
// 点击删除商品
const delGoods = async (productID: number) => {
  const user_id = appStore.user_id;
  console.log(user_id, productID);

  await delShoppingCartApi(user_id, productID);
  shoppingCartStore.shoppingCartData =
    shoppingCartStore.shoppingCartData.filter((item) => {
      item.productID !== productID;
    });
};
</script>

<style scoped>
.shopping,
.footing {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #f5f5f5;
  padding-top: 20px;
}
.shopping {
  border-top: 2px solid #ff6700;
}

.one:hover {
  color: #ff6700;
}

.content {
  box-sizing: border-box;
  width: 1226px;
  background-color: white;
}
.title {
  display: flex;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #e0e0e0;
  padding-right: 26px;
}
.checks,
.check {
  width: 100px;
  padding-left: 20px;
  color: #424242;
}
.checks {
  display: flex;
  align-items: center;
}
.checkbox {
  width: 20px;
  height: 20px;
}
.goodsImgs,
.goodsImg {
  width: 120px;
  text-align: left;
  color: #424242;
}
.goodsImg img {
  width: 80px;
  height: 80px;
}
.goodsImg {
  width: 120px;
  height: 86px;
  padding-right: 40px;
}
.goodsNames,
.goodsName {
  width: 380px;
  color: #424242;
}
.goodsName {
  font-size: 18px;
}
.prices,
.price {
  width: 158px;
  padding-right: 18px;
  text-align: center;
  color: #424242;
}
.price,
.total {
  font-size: 16px;
}
.details .total {
  color: #ff6700;
}
.inputNumbers,
.inputNumber {
  width: 150px;
  text-align: center;
  color: #424242;
}
.inputNumber {
  display: flex;
  align-items: center;
}
.totals,
.total {
  width: 201px;
  padding-right: 81px;
  text-align: right;
  color: #424242;
}
.handles,
.handle {
  width: 80px;
  text-align: center;
  color: #424242;
}
.handle {
  height: 86px;
  line-height: 86px;
  text-align: center;
  cursor: pointer;
}
.checks,
.goodsNames,
.prices,
.inputNumbers,
.totals,
.handles {
  font-size: 14px;
}
.details {
  display: flex;
  height: 86px;
  line-height: 86px;
}
.btn {
  width: 30px;
  height: 30px;
  background-color: #f5f5f5;
}
.footing-content {
  width: 1226px;
  background-color: white;
  display: flex;
  height: 50px;
  line-height: 50px;
  justify-content: space-between;
  margin: 20px 0;
}
.left {
  display: flex;
  width: 200px;
  font-size: 14px;
  color: #757575;
  padding-left: 32px;
}
.one a {
  padding-right: 16px;
  border-right: 1px solid #eee;
}
.left .two {
  margin-left: 16px;
}
.right {
  display: flex;
  font-size: 14px;
}
.right .totalMoney {
  color: #ff6700;
}
.right .goSettlement {
  margin-left: 50px;
  text-align: center;
  background-color: #ff6700;
  width: 202px;
  color: white;
}
</style>
